<template>
	<div>
		<van-list :error.sync="error" error-text="加载失败,请点击重试" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<van-cell :to="`/article/${article.art_id}`" v-for="(article, index) in list" :key="index" 
			:title="article.title" />
		</van-list>
	</div>
</template>

<script>
	import {
		getSearchResults
	} from '@/api/search.js'

	export default {
		name: 'SearchResult',
		
		props: {
			searchText: {
				type: String,
				required: true
			},
		},

		data() {
			return {
				list: [],
				loading: false,
				finished: false,
				page: 1,
				perPage: 10,
				error: false
			};
		},
		methods: {
			async onLoad() {
				try {
					const {
						data: res
					} = await getSearchResults({
						page: this.page,
						per_page: this.perPage,
						q: this.searchText
					})
					
					const {
						results
					} = res.data
					this.list.push(...results)
					this.loading = false

					if (results.length) {
						this.page++
					} else {
						this.finished = true
					}
				} catch (e) {
					this.error = true
					this.loading = false
				}
			},
		},
	}
</script>

<style scoped>

</style>
